
<dom-module id="ve-relative">
    <template>
        <style>

            /* set width and min-width at the same time to make size unchanged */
            ve-input {
                flex: "1";
            }
            ve-input::shadow #input {
                padding: 2px;
            }
            span.space {
                flex:none;
                height:6px
            }

            h-checkbox {
                min-width:30px;
                max-width:30px;
            }

        </style>

        <div class="layout horizontal center">
            <ve-checkbox class="h-checkbox" path="{{path}}.checkTop" value="{{value.isAlignTop}}" on-value-changed="_onTopChecked">Top</ve-checkbox>
            <ve-input id="top_input" class="flex-1" value="{{value.top}}" path="{{path}}.top" hidden="{{!_is(value.isAlignTop)}}"></ve-input>
        </div>

        <div class="layout horizontal center">
            <ve-checkbox value="{{value.isAlignVerticalCenter}}"  path="{{path}}.checkVertical" on-value-changed="_onVerticalCenterChecked">VCenter</ve-checkbox>
            <ve-input id="vertical_input" class="bottom-input flex-1" value="{{value.vertical}}" path="{{path}}.vertical" hidden="{{!_is(value.isAlignVerticalCenter)}}"></ve-input>
        </div>

        <div class="layout horizontal center">
            <ve-checkbox class="h-checkbox" path="{{path}}.checkBottom" value="{{value.isAlignBottom}}" on-value-changed="_onBottomChecked">Bottom</ve-checkbox>
            <ve-input id="bottom_input" value="{{value.bottom}}" path="{{path}}.bottom" hidden="{{!_is(value.isAlignBottom)}}"></ve-input>
        </div>
        
        <span class="space"></span>

        <div class="layout horizontal center">
            <ve-checkbox value="{{value.isAlignLeft}}" path="{{path}}.checkLeft" on-value-changed="_onLeftChecked">Left</ve-checkbox>
            <ve-input id="left_input" class="bottom-input" value="{{value.left}}" path="{{path}}.left" hidden="{{!_is(value.isAlignLeft)}}"></ve-input>
        </div>

        <div class="layout horizontal center">
            <ve-checkbox value="{{value.isAlignHorizontalCenter}}" path="{{path}}.checkHorizontal" on-value-changed="_onHorizontalCenterChecked">HCenter</ve-checkbox>
            <ve-input id="horizontal_input" class="bottom-input" value="{{value.horizontal}}" path="{{path}}.horizontal" hidden="{{!_is(value.isAlignHorizontalCenter)}}"></ve-input>
        </div>


        <div class="layout horizontal center">
            <ve-checkbox value="{{value.isAlignRight}}" path="{{path}}.checkRight" on-value-changed="_onRightChecked">Right</ve-checkbox>
            <ve-input id="right_input" class="bottom-input" value="{{value.right}}" path="{{path}}.right" hidden="{{!_is(value.isAlignRight)}}"></ve-input>
        </div>

    </template>
    <script>(() => {
        "use strict";
        Polymer({
            properties: {
                value: {
                    type: Object,
                    value: {},
                    notify: true
                }
            },

            ready: function () {
                this._isReady = true;
            },

            _is: function(t) {
                return !!t
            },
            
            _onTopChecked: function(t, e) {
                if(!this._isReady) {
                    return;
                }
                if(e.value == true) {
                    this.set("value.isAlignVerticalCenter", false)
                    this.$.top_input.confirm();
                }
            },
            _onLeftChecked: function(t, e) {
                if(!this._isReady) {
                    return;
                }
                if(e.value == true) {
                    this.set("value.isAlignHorizontalCenter", false)
                    this.$.left_input.confirm();
                }
            },
            _onRightChecked: function(t, e) {
                if(!this._isReady) {
                    return;
                }
                if(e.value == true) {
                    this.set("value.isAlignHorizontalCenter", false)
                    this.$.right_input.confirm();
                }
            },
            _onBottomChecked: function(t, e) {
                if(!this._isReady) {
                    return;
                }
                if(e.value == true) {
                    this.set("value.isAlignVerticalCenter", false)
                    this.$.bottom_input.confirm();
                }
            },
            _onHorizontalCenterChecked: function(t, e) {
                if(!this._isReady) {
                    return;
                }
                if(e.value) {
                    this.set("value.isAlignLeft", false);
                    this.set("value.isAlignRight", false);
                    this.$.horizontal_input.confirm();
                }
            },
            _onVerticalCenterChecked: function(t, e) {
                if(!this._isReady) {
                    return;
                }
                if(e.value) {
                    this.set("value.isAlignTop", false);
                    this.set("value.isAlignBottom", false);
                    this.$.vertical_input.confirm();
                }
            }
        });
    })();
    </script>
</dom-module>